import { defineComponent, ref } from "vue";
import styles from "./InsureConfirm.module.scss";
import { useStore as useInsureStore } from "@/store/insure";

export default defineComponent({
  emits: ['confirm'],
  setup(props, { expose, emit }) {
    const is_show = ref(false);
    const insureStore = useInsureStore();
    const open = () => {
      is_show.value = true;
    }
    const close = () => {
      is_show.value = false;
    }
    expose({
      open,
      close,
    });
    return () => (
      is_show.value && (
        <div class={styles.InsureConfirm}>
          <div class={styles.card}>
            <div class={styles.title}>投保信息确认</div>
            <div class={styles.content}>
              <div class={styles.part}>
                <div class={styles['part-title']}>
                  <div class={styles['flag']}>1</div>
                  <span>投保人信息</span>
                </div>
                <div class={styles['part-content']}>
                  <div class={styles['part-row']}>
                    <span class={styles['row-label']}>投保人姓名</span>
                    <span class={styles['row-value']}>{insureStore.form.applicant.name}</span>
                  </div>
                  <div class={styles['part-row']}>
                    <span class={styles['row-label']}>证件类型</span>
                    <span class={styles['row-value']}>身份证</span>
                  </div>
                  <div class={styles['part-row']}>
                    <span class={styles['row-label']}>身份证号</span>
                    <span class={styles['row-value']}>{insureStore.form.applicant.id_no}</span>
                  </div>
                  <div class={styles['part-row']}>
                    <span class={styles['row-label']}>手机号</span>
                    <span class={styles['row-value']}>{insureStore.form.applicant.mobile}</span>
                  </div>
                  <div class={styles['part-row']}>
                    <span class={styles['row-label']}>户口所在地</span>
                    <span class={styles['row-value']}>{insureStore.form.applicant.address?.join("")}</span>
                  </div>
                </div>
              </div>
              {
                insureStore.form.insured.map((item: any, index: number) => (
                  <div class={styles.part}>
                    <div class={styles['part-title']}>
                      <div class={styles['flag']}>2</div>
                      <span>被保人信息</span>
                    </div>
                    <div class={styles['part-content']}>
                      <div class={styles['part-row']}>
                        <span class={styles['row-label']}>与投保人关系</span>
                        <span class={styles['row-value']}>{item.identity.dict_label}</span>
                      </div>
                      <div class={styles['part-row']}>
                        <span class={styles['row-label']}>被保人姓名</span>
                        <span class={styles['row-value']}>{item.name}</span>
                      </div>
                      <div class={styles['part-row']}>
                        <span class={styles['row-label']}>证件类型</span>
                        <span class={styles['row-value']}>身份证</span>
                      </div>
                      <div class={styles['part-row']}>
                        <span class={styles['row-label']}>身份证号</span>
                        <span class={styles['row-value']}>{item.id_no}</span>
                      </div>
                      <div class={styles['part-row']}>
                        <span class={styles['row-label']}>手机号</span>
                        <span class={styles['row-value']}>{item.mobile}</span>
                      </div>
                      <div class={styles['part-row']}>
                        <span class={styles['row-label']}>户口所在地</span>
                        <span class={styles['row-value']}>{item.address.join("")}</span>
                      </div>
                    </div>
                  </div>
                ))
              }
            </div>
            <div class={styles.footer}>
              <div class={styles.btn} onClick={() => is_show.value = false}>
                返回
              </div>
              <div class={styles.btn} onClick={() => emit("confirm")}>
                确认并支付
              </div>
            </div>
          </div>
        </div>
      )
    )
  }
})